<template>
  <div class="comment-list">
    <!-- 分页组件 -->
    <el-pagination
        v-model:currentPage="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[3, 5, 10]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
    ></el-pagination>
    <!-- 评论列表 -->
    <div v-if="comments.length > 0">
      <SingleComment
          v-for="comment in comments"
          :key="comment.commentId"
          :comment="comment"
      />
    </div>
    <div v-else class="no-comments">暂无评论</div>


  </div>
</template>

<script>
import {ElMessage} from "element-plus";
import axios from "axios";
import SingleComment from "./SingleComment.vue";

export default {
  components: {
    SingleComment
  },
  data() {
    return {
      comments: [], // 当前页的评论数据
      currentPage: 1, // 当前页码
      pageSize: 3, // 每页大小
      total: 0, // 总评论数
      relatedId: null, // 相关 ID（从父组件传入）
      relatedCategory: "" // 固定类别为“食堂店铺”
    };
  },
  mounted() {
    this.initialRequestParams();
    this.fetchComments();
  },
  methods: {
    initialRequestParams() {
      const query = this.$route.query;
      console.log(query);
      //判断是否为食堂店铺
      if (query.shopId !== undefined) {
        this.relatedId = query.shopId;
        this.relatedCategory = "食堂店铺";
      }
      //判断是否为教学楼信息
      if (query.contentId !== undefined) {
        this.relatedId = query.contentId;
        this.relatedCategory = "教学楼和学院楼";
      }
      //判断是否为舞萌中二条目
      if (query.mcId !== undefined) {
        this.relatedId = query.mcId;
        this.relatedCategory = "舞萌中二";
      }
      //判断是否为运动场条目
      if (query.playgroundId !== undefined) {
        this.relatedId = query.playgroundId;
        this.relatedCategory = "运动场";
      }
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.fetchComments();
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.fetchComments();
    },
    async fetchComments() {
      try {
        const response = await axios.get("/comment/page", {
          params: {
            relatedId: this.relatedId,
            relatedCategory: this.relatedCategory,
            pageNum: this.currentPage,
            pageSize: this.pageSize,
            orderBy: "like" // 默认按点赞数排序
          }
        });
        console.log(response.data.data); // 输出完整响应数据
        const pageInfo = response.data.data;
        console.log('pageInfo.list:', pageInfo.list); // 输出评论列表
        console.log('pageInfo.total:', pageInfo.total); // 输出总评论数
        this.comments = pageInfo.list || [];
        this.total = pageInfo.total || 0;
        console.log('this.total:', this.total); // 输出总评论数
      } catch (error) {
        ElMessage.error("网络错误，请稍后再试");
        console.error("加载评论失败：", error);
      }
    }
  },
};
</script>

<style scoped>
.comment-list {
  padding: 10px;
}

.no-comments {
  text-align: center;
  color: #999;
  margin-top: 20px;
}
</style>